import React, { Fragment, useEffect, useState } from "react";
// import { useNavigate } from "react-router-dom";
import { Button, ConfigProvider } from "antd";
import zh_CN from 'antd/locale/zh_CN'
import { Pagination, Table, DatePicker, Form } from 'antd';

import { Outlet, useNavigate } from "react-router-dom";
import dayjs from "dayjs";
import { getAllDayReportApi } from "@/api/api";
import { useSelector } from "react-redux";


const DayBody = function () {
    const [StartTime, setStartTime] = useState(0)
    const [EndtTime, setEndTime] = useState(0)
    const [keyvalue, setkeyvalue] = useState('')
    const [data, setdata] = useState([])
    const token = useSelector((state) => state.global.token)
    console.log(token);
    //页面加载渲染数据
    useEffect(() => {

        getAllDayReportApi({
            pagNo: pagination.current,
            pageSize: pagination.pageSize
        }).then((res) => {
            res.data.records.map((item) => {
                item.key = item.id
                item.isBalance = item.isBalance == "1" ? '是' : '否'
            })
            setdata(res.data.records)
        })

    }, [])
    const showTotal = () => { return `共 ${data.length} 条记录`; }
    const pagination = {
        total: data.length,
        defaultPageSize: 5,
        showTotal: showTotal,

        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: [5, 10, 20, 30, 50]
    }
    const columns = [
        {
            title: '日期范围',
            dataIndex: 'reportTime',
            key: 'reportTime',
            width: '20%',
        },
        {
            title: '完成内容',
            dataIndex: 'content',
            key: 'content',
            width: '30%',
            ellipsis: true,
        },
        {
            title: '有风险的内容',
            dataIndex: 'riskInfo',
            key: 'riskInfo',
            width: '30%',
            ellipsis: true,
        },
        {
            title: '是否有延迟',
            dataIndex: 'isBalance',
            key: 'isBalance',
            width: '10%',
        },
        {
            title: '操作',
            dataIndex: '',
            key: 'x',
            width: '10%',
            render: (record) => <a onClick={() => toDetail(record)}>详情</a>,
        },
    ];
    //查询按钮
    const query = () => {
        console.log(StartTime);
        console.log(EndtTime);
        let info = data.filter((item) => {
            return dayjs(item.reportTime).unix() >= StartTime && dayjs(item.reportTime).unix() <= EndtTime
        })
        console.log(info);
        setdata(info)
    }
    //重置按钮
    const reset = () => {
        setStartTime(0)
        setEndTime(0)
        setkeyvalue(new Date())
        getAllDayReportApi({
            pagNo: pagination.current,
            pageSize: pagination.pageSize
        }).then((res) => {
            res.data.records.map((item) => {
                item.key = item.id
                item.isBalance = item.isBalance == "1" ? '是' : '否'
            })
            setdata(res.data.records)
        })
    }
    //时间变化回调
    const onTimeChange = (date) => {
        if (date) {
            setStartTime(dayjs(date[0]).unix())
            setEndTime(dayjs(date[1]).unix())
        } else {
            console.log('Clear');
        }
    };
    const navigate = useNavigate()
    //新增日报
    const addday = () => {
        return navigate('/home/weekly/addday')
    }
    //详情
    const toDetail = (record) => {
        console.log(record);
        return navigate('/home/weekly/addday', {
            replace: false,
            state: {
                date: dayjs(record.reportTime).unix(),
                delay: record.isBalance,
                done: record.content,
                todo: record.riskInfo,
            }
        })
    }
    return (
        <Fragment>
            <Form layout='inline'>
                <Form.Item>
                    日期范围：<DatePicker.RangePicker
                        placeholder={["开始日期", "结束日期"]}
                        key={keyvalue}
                        onChange={onTimeChange}
                        allowClear={true} />
                </Form.Item>
                <Form.Item><Button type="primary" onClick={query}>查询</Button></Form.Item>
                <Form.Item><Button  onClick={reset}>重置</Button></Form.Item>

            </Form>
            <Button onClick={addday} style={{marginTop:"30px",marginBottom:"10px"}}>新增日报</Button>
            <ConfigProvider locale={zh_CN}>
                <Table
                    columns={columns}
                    dataSource={data}
                    pagination={pagination}
                />
            </ConfigProvider>
        </Fragment>
    );
}
export default DayBody;
